<template>
  <div class="center">
        <div class="header">
              <div class="operate">
                    <i class="modify"><router-link :to="{name:'modifyInfo'}"></router-link></i>
              </div>
              <div class="pic">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495103753168&di=f5a75c456f481fa9ae2f4aae2a2a24cb&imgtype=0&src=http%3A%2F%2Fwww.16sucai.com%2Fuploadfile%2F2013%2F0603%2F20130603081957581.jpg"/>
              </div>
              <p class="username">一封致命</p>
        </div>
        <ul class="nav">
              <li>家长必读</li>
              <li>预约指南</li>
              <li>使用指南</li>
        </ul>
        <ul class="menu">
             <li><a href="tel:13800138000">客服电话</a></li>
             <li>帮助中心</li>
             <router-link :to="{path:'feedback'}" tag="li">意见反馈</router-link>
             <li>我的文章</li>
             <li>关于我们</li>
        </ul>
        <public-footer></public-footer>
  </div>
</template>

<script>
import publicFooter from './footer'
export default {
    data(){
        return{
            
        }
    },
    components:{
      publicFooter
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.center
{
   padding-bottom:1.3rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
   .header
   {
      padding:1rem 0;
      text-align:center;
      background:#fff;
      background-image:url(http://pic.90sjimg.com/back_pic/u/00/38/01/53/55fb620512e1e.jpg);
      background-position:center top;
      background-size:auto 100%;
      background-repeat:no-repeat;
      background-color:#eee;
      position:relative;
      .operate
      {
         position:absolute;
         right:0;
         top:0;
         padding:0.2rem;
         .modify
         {
           width:0.3rem;
           height:0.3rem;
           display:inline-block;
           a{
             display:inline-block;
             width:0.3rem;
             height:0.3rem;
             background-image:url(../assets/modify.png);
             background-position:center center;
             background-size:100% 100%;
             background-repeat:no-repeat;
           }
         }
      }
      .pic
      {
         display:inline-block;
         width:1.8rem;
         height:1.8rem;
         border:1px solid #ddd;
         border-radius:50%;
         overflow:hidden;
         img
         {
            width:100%;
            height:100%;
            border-radius:50%;
         }
      }
      .username
      {
         margin-top:0.2rem;
      }
   }
   .nav
   {
      display:flex;
      background:#fff;
      text-align:center;
      li
      {
        flex:1;
        line-height:1rem;
        height:1rem;
        &:nth-child(1),
        &:nth-child(2)
        {
          position:relative;
          &::after
          {
            content:'';
            display:inline-block;
            height:0.4rem;
            border-right:1px solid #ccc;
            position:absolute;
            top:50%;
            right:0;
            margin-top:-0.2rem;
          }
        }
      }
   }
   .menu
   {
      background:#fff;
      padding:0 0 0 0.3rem;
      margin:0.3rem 0;
      li 
      {
         line-height:0.8rem;
         height:0.8rem;
         border-bottom:1px solid #eee;
         position: relative;
         padding-left:0.6rem;
         &::before
         {
            content:'';
            width:0.8rem;
            height:0.8rem;
            display:inline-block;
            position: absolute;
            left:0;
            top:0;
            background-position:left center;
            background-size:0.4rem auto;
            background-repeat:no-repeat;
         }
         &::after
         {
            content:'';
            display:inline-block;
            width:0.15rem;
            height:0.15rem;
            border-right:1px solid #999;
            border-top:1px solid #999;
            position:absolute;
            right:0.3rem;
            top:0.36rem;
            -webkit-transform: rotate(45deg);
               -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                 -o-transform: rotate(45deg);
                    transform: rotate(45deg);
         }
         &:last-child
         {
            border-bottom:none;
         }
         &:nth-child(1)
         {
            &::before
            {
               background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495184279647&di=272d85a9a487d6781512e86245ff3fff&imgtype=0&src=http%3A%2F%2Fwww.onlinedown.net%2Fzt%2Fas39%2Fimg%2F01.png);
            }
         }
         &:nth-child(2)
         {
            &::before
            {
               background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495184381376&di=1dff22dbb317ead1a30e62796845577f&imgtype=0&src=http%3A%2F%2Fwww.lgstatic.com%2Fi%2Fimage%2FM00%2F02%2F89%2FCgp3O1aTatKANNL9AACJ_N12dQc319.png);
            }
         }
         &:nth-child(3)
         {
            &::before
            {
               background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495184470014&di=e9333e42f633f867bc99d81f0d52853e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F75%2F14%2F20300543040368143255142560980_s.jpg);
            }
         }
         &:nth-child(4)
         {
            &::before
            {
               background-image:url(http://fdfs.xmcdn.com/group11/M0A/10/B3/wKgDbVbFdR7zTQdCAABYdbX9kog472.jpg);
            }
         }
         &:nth-child(5)
         {
            &::before
            {
               background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495184584109&di=6cb9eaf3d3f064925fa397e1728f664c&imgtype=0&src=http%3A%2F%2Fimg3.gao7.com%2Ffiles%2Fappleimage%2FCDF%2FCDFA779C-F1F0-48DB-A8C1-029E3A0A7CC4.jpg);
            }
         }
         a
         {
          display:block;
         }
      }
   }
}
</style>
